<!--  -->
<template>
  <section>
    <div class="Face">
      <div class="imgBox">
        <span>备案图片：</span>
        <div style="width: 300px;margin-top: 10px">
          <el-button type="primary" :loading="loading"><i class="el-icon-plus" @click="addRemoteFile('')"></i>添加</el-button>
        </div>
        <div class="image-wrap">
          <div v-if="false" class="image" v-for="(item, index) in imageList">
            <div class="icon">
              <el-tag v-if="item.loadCompleted==-1" size="mini" type="danger">
                {{ loadCompletedObj[item.loadCompleted] }}
              </el-tag>
              <el-tag v-else-if="item.loadCompleted==1" size="mini" type="success">
                {{ loadCompletedObj[item.loadCompleted] }}
              </el-tag>
              <el-tag v-else size="mini">{{ loadCompletedObj[item.loadCompleted] }}</el-tag>
            </div>
            <div>
              <el-image
                class="image-item"
                :src="item.url"
                :key="index"
              >
              </el-image>
            </div>
          </div>
          <div class="image-wrap">
            <el-table
              :data="imageList"
              border
              fit
              highlight-current-row
            >
              <el-table-column align="center" label="备案图片" width="100px">
                <template slot-scope="scope">
                  <el-image
                    style="width: 60px; height: 60px;"
                    ref="lazyImg"
                    fit="cover"
                    :preview-src-list="[scope.row.url]"
                    :src="scope.row.url"
                    :key="scope.row.url"
                  >
                    <div slot="placeholder" class="image-slot">
                      <i class="el-icon-loading"></i>加载中
                    </div>
                    <div slot="error" class="image-slot">
                      <i class="el-icon-picture-outline"></i>
                    </div>
                  </el-image>
                </template>
              </el-table-column>
              <el-table-column
                align="center"
                class-name="status-col"
                label="状态"
                prop="sTime"
              >
                <template slot-scope="scope">{{ loadCompletedObj[scope.row.loadCompleted] }}</template>
              </el-table-column>
              <el-table-column
                align="center"
                class-name="status-col"
                label="操作"
                width="120"
              >
                <template slot-scope="{ row, $index }">
                  <el-button
                    slot="reference"
                    size="mini"
                    class="light_red_btn"
                    @click="handleRemove(row)"
                  >删除
                  </el-button>
                </template>
              </el-table-column>
            </el-table>

          </div>

        </div>
      </div>
    </div>
    <el-dialog :visible.sync="dialogVisible">
      <div style="display: flex; justify-content: center; align-items: center">
        <img :src="dialogImageUrl"/>
      </div>
    </el-dialog>
  </section>
</template>

<script>
import {getEventIdentity, handleRemoteAdd} from "@/api/community/person";

export default {
  props: {
    personId: {
      type: String,
      default: "",
    },
    personName: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      loading:false,
      imageList: [],
      dialogImageUrl: '',
      dialogVisible: false,
      loadCompletedObj: {
        '-1': `已发送到设备，设备回复:失败`,
        '0': '已发送到设备，设备回复:等待',
        '1': '已发送到设备，设备回复:成功',
        '2': '已发送到设备，设备回复:正在删除'
      }
    };
  },
  methods: {
    getPersonFace() {
      let query = {
        personId: this.personId,
        type: "facePicture",
      };
      getEventIdentity(query).then((res) => {
        let list = res;
        list.forEach((item) => {
          item.url = process.env.VUE_APP_BASE_URL + item.identityData;
          item.name = item.identityID;
        });
        this.imageList = list;
      });
    },
    handlePictureCardPreview(uploadFile) {
      // console.log(uploadFile.url);
      this.dialogImageUrl = uploadFile.url;
      this.dialogVisible = true;
    },
    addRemoteFile(type) {
      let params = {
        name: this.$props.personName,
        effectiveStartTime: "",
        validEndTime: "",
        type: "0",
      }
      console.log('type', type)
      // if (type === `0`) {
      //   this.loading_left = true
      // } else {
      //   this.loading_right = true
      // }
      handleRemoteAdd(params).then(r => {
        console.log(r);
        this.loading = false
        this.$message.success("操作成功");
      }).catch(e => {
        console.log(e);
        this.loading = false
        this.$message.error("操作失败，请重试");
      })
    },
  },
  created() {
    this.getPersonFace();
  },
  computed: {
    localOrigin() {
      return location.origin;
    },
  }
};
</script>

<style lang="scss" scoped>

.image-wrap {
  width: 600px;
  display: flex;
  margin-top: 10px;

  .image {
    position: relative;
    width: 100px;
    height: 150px;
    margin-left: 10px;
    border: 1px dashed #ddd;

    .icon {
      position: absolute;
      right: 30%;

      bottom: 0;
      z-index: 1
    }

    .image-item {
      width: 100px;
      height: 120px;
      margin-right: 10px;
    }
  }


}
</style>
